<template>
	<view>
		<!-- #ifdef APP-PLUS||H5 -->
		<titlebara mode="发文章"  :backToIndex="false" :back="true"  text="发文章" backgroundColor='#f5f5f5'>
			<view slot="title">
				<image class="showMore" mode='aspectFit'
					src="https://dnsverify.pfmoto.com/appstatic/community/more.png" @click="showMore">

					<view v-if="content.length <= 0 && imgList.length <= 0 ||cover ==''" class="showMore titleCommentTouched_" 
						@click="commentTouched">
						+发布
					</view>
					<view v-else class="showMore titleCommentTouched" @click="commentTouched">+发布</view>
					<view class="titleText">发文章</view>
			</view>
		</titlebara>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<titlebara mode="发文章" :backToIndex="false" :back="true" :text="text" backgroundColor='#f5f5f5'>
			<view slot="title">
				<view class="titleText">发文章</view>
			</view>
		</titlebara>
		<!-- #endif -->
		
		<view class="releaseState" :style="{'top':top+'px','height':'calc(100vh - '+top+'px)'}">
			<view class="content-pd" >

				<view>
					<view class="uploadImg" :style="'display:block'">

						<view class="inputGreybg">

							<image class="uploadImg"
								:src="cover || 'https://dnsverify.pfmoto.com/appstatic/community/article-cover.png'"
								mode='aspectFill' @click="selectMedia" />
						</view>
					</view>
					<u--textarea border="bottom" :show-img-toolbar="true" style="margin-top: 20px;" :autoHeight="true" v-model="titleArticle"
						maxlength="60" placeholder="文章标题" >
					</u--textarea>

					<editor id="editor"  class="ql-container" placeholder="点击输入文章内容" @input="changeData"
						@ready="onEditorReady"></editor>
					<view class="topic">
						<view class="topic-item" v-for="(item,index) in selectTopic" :key="index">
							<image src="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png"
								mode="aspectFill">
							</image>
							<text>{{item.name || ''}}</text>
							<image @click="deltopic(item)" class="close-topic"
								src="https://dnsverify.pfmoto.com/appstatic/community/close-topic.png"
								mode="aspectFill">
						</view>
					</view>
				</view>
			</view>
			<view class="imageList" v-for="(item, index) in fileList" :key="item.uuid">

				<UploadView v-show="false" :ref="'uploadView'+index" :sourceFileList="fileList" :item="item"
					@uploading="uploading" @delete="uploadDelete" @error="uploadError" @success="uploadSuccess"
					@uploadPercent="uploadPercent" :percent="item.percent?item.percent:0"
					:class="item.mediaType=='video'?'videoView':'uploadBtn'"></UploadView>

			</view>
			<view class="footer">
				<view class="uploadTopic" @click="toSelectTopic()">
					<view class="topicName">
						<image class="s-topic"
							src="https://dnsverify.pfmoto.com/appstatic/community/s-topic.png" mode=""></image>
						<text>选话题</text>
					</view>
				</view>
				<view class="upload-img" @click="insertImage">
					<image class="" src="https://dnsverify.pfmoto.com/appstatic/community/upload-img.png"
						mode="">
					</image>
				</view>

				<!-- #ifdef MP-WEIXIN -->
				<view v-if="content.length <= 0 && imgList.length <= 0" class="commentTouched_" @click="commentTouched">
					+发布
				</view>
				<view v-else class="commentTouched" @click="commentTouched">+发布</view>
				<!-- #endif -->



			</view>
			<!-- 话题选择弹出框 -->
			<u-popup :show="show">
				<view class="action-wraper">
					<image @click="closePopup" src="https://dnsverify.pfmoto.com/appstatic/community/x.png"
						mode="">
					</image>
					<text>选择话题</text>
					<text @click="confirmTopic">确定</text>
				</view>
				<view class="popup">
					<u-search shape="square" :clearabled="false" @custom="custom" @change="changeDataTopic"
						v-model="topic" placeholder="请输入话题" searchIconSize="18" bgColor="#ededed"
						placeholderColor="#ADB0AE"
						searchIcon="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png"
						:showAction="true" actionText="取消">
					</u-search>
					<view class="topic s-topoc-item">
						<view class="topic-item" v-for="(item,index) in selectTopic" :key="index">
							<image src="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png"
								mode="aspectFill">
							</image>
							<text>{{item.name || ''}}</text>
							<image @click="deltopic(item)" class="close-topic"
								src="https://dnsverify.pfmoto.com/appstatic/community/close-topic.png"
								mode="aspectFill">
						</view>
					</view>
					<view class="" v-if="topicList.length>0">
						<view class="hot-topic-title">
							<text>热门话题</text>
						</view>
						<view class="hot-topic">
							<view @click="selectTopicItem(item)"
								:class="item.select == true ?'hot-topic-item select':'hot-topic-item'"
								v-for="(item,index) in topicList" :key="index">
								
								<view class="text">
									<image class="s-topic"
										src="https://dnsverify.pfmoto.com/appstatic/community/s-topic.png"
										mode="">
									</image>
									{{item.name || ''}}
								</view>
								
							</view>
						</view>
					</view>
					<view class="noData" v-else>
						<text>未搜索到相关话题？</text>
						<text @click="creatTopic">#创建话题</text>
					</view>

				</view>

			</u-popup>
		</view>
	</view>
</template>
<script>
	const guid = function() {
		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
			var r = Math.random() * 16 | 0,
				v = c == 'x' ? r : (r & 0x3 | 0x8);
			return v.toString(16);
		});
	}
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	import UploadView from '@components/UploadView/UploadView.vue'
	import wCache from '@utils/wCache.js'
	import titlebara from '@/components/titlebar/titlebar'
	export default {
		components: {
			UploadView,
			titlebara
		},
		data() {
			return {
				top:app.globalData.statusBarHeight+ 44,
				formats: {},
				show: false,
				selector: ['拍摄', '从手机相册选择'],
				showPicker: false,
				content: '',
				titleArticle: '',
				fileList: [{
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				}],
				topPagination: {
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 10,
					length: 100
				},
				oldSelectTopic: [],
				cover: '',
				topicList: [],
				imgList: [],
				selectTopic: [],
				topic: '',
				topicId: '',
				showUpload: false,
				showTopic: true,
				topicName: '',
				showUploadImg: false,
				disabled: false,
				flag:false,
				urls:[]
			};
		},
		onLoad(data) {
			// uni.loadFontFace({
			// 	family: 'Pacifico',
			// 	source: 'url("https://sungd.github.io/Pacifico.ttf")'
			// })
		},
		onShow() {

			if (uni.getStorageSync('topicName')) {
				this.topicName = uni.getStorageSync('topicName')
			}
			if (uni.getStorageSync('topicId')) {
				this.topicId = uni.getStorageSync('topicId')
			}
			// this.$refs.uploadView.upload()
			app.trackPage(util.getNavigationBarTitle());

		},
		created() {
			this.loadTopicList(true)
		},
		methods: {
			creatTopic() {
				if (util.isLogin(getApp())) {
					var params = {
						"name": this.search,
						"authorId": app.getUserId(),
						"createrType": 0
					}
					var uri = app.globalData.config.interfaces.URL_TOPIC_ADD;
					network.post(uri, params, 'json',{},true).then(res => {
						uni.stopPullDownRefresh();
						if (res.code == 200) {
							this.selectTopic.push(res.data)
			
						} else {
							setTimeout(() => {
								wx.showToast({
									title: res.message,
									mask: true,
									icon: 'none',
									duration: 2000
								});
							}, 500);
			
						}
						uni.hideLoading()
					}).catch(res => {
						setTimeout(() => {
							wx.showToast({
								title: res.errMsg,
								mask: true,
								icon: 'none',
								duration: 2000
							});
						}, 500);
						uni.hideLoading()
					});
			
			
				} else {
					util.jumpLogin()
				}
			},
			changeData(val) {
				this.content = val.detail.html
			},
			changeDataTopic(val) {
				this.search = val
				this.loadTopicList(true, val)
			},
			readOnlyChange() {
				this.readOnly = !this.readOnly
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)
			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				this.editorCtx.clear({
					success: function(res) {
						console.log("clear success")
					}
				})
			},

			uploadFile(fileUrl, mediaType) {
				console.log(mediaType)
				if(mediaType == 'video'){
					uni.showToast({
						title: "请上传图片",
						duration: 3000,
						icon: 'none'
					})
					return
				}
				var _self = this;
				var uploadUrl = app.globalData.config.BASE_URL + app.globalData.config.interfaces.URL_ALIYUN_OSS_UPLOAD
				var uploadTask = uni.uploadFile({
					url: uploadUrl, //仅为示例，非真实的接口地址
					filePath: fileUrl,
					name: 'file',
					header: {
						"token": "Bearer " + app.globalData.token,
						"Authorization": "Bearer " + app.globalData.token,
					},
					success: (uploadFileRes) => {
						var uploadFileData = JSON.parse(uploadFileRes.data);
						if (uploadFileData.code == 200) {
							this.editorCtx.insertImage({
								src: uploadFileData.data,
								alt: '图像',
								success: function() {
									console.log(_self.fileList)
									_self.urls.push(uploadFileData.data)
								}
							})
						} else {
							setTimeout(() => {
								uni.showToast({
									title: "上传失败" + uploadFileData.message,
									duration: 3000,
									icon: 'none'
								})
							}, 500);
							

						}
					},
					fail(e) {
						console.log("上传失败", e);
					}
				});

			},
		
			insertImage() {
				uni.chooseImage({
					count: 9,
					success: (res) => {
						console.log('res!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'+ JSON.stringify(res))
						for(var i=0;i<res.tempFilePaths.length;i++){
							this.uploadFile(res.tempFilePaths[i], 'image')
						}
					}
				})
			},
			closePopup() {
				this.show = false
				this.selectTopic = []
				console.log(this.oldSelectTopic)
				this.topicList.map(item => {
					item.select = false
				})
			},
			confirmTopic() {

				this.show = false
				// this.oldSelectTopic = this.selectTopic
			},
			// onNavigationBarButtonTap: function(e) {
			// 	this.commentTouched()

			// },
			selectTopicItem(row) {

				this.topicList.map(item => {
					if (item.uuid == row.uuid && item.select == false) {
						item.select = true
						this.selectTopic.push(item)
					}
				})

			},
			selectMedia() {
				// var that = this
				// uni.showActionSheet({
				// 	itemList: that.selector,
				// 	success: function(res) {
				// 		that.confirm(res.tapIndex + 1)
				// 		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				// 	},
				// 	fail: function(res) {
				// 		console.log(res.errMsg);
				// 	}
				// });
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res)
						this.uploadFileCover(res.tempFilePaths[0], 'image')
				
					}
				})
			},
			uploadFileCover(fileUrl, mediaType) {
				if(mediaType == 'video'){
					uni.showToast({
						title: "请上传图片",
						duration: 3000,
						icon: 'none'
					})
					return
				}
				var _self = this;
				var uploadUrl = app.globalData.config.BASE_URL + app.globalData.config.interfaces.URL_ALIYUN_OSS_UPLOAD
				var uploadTask = uni.uploadFile({
					url: uploadUrl, //仅为示例，非真实的接口地址
					filePath: fileUrl,
					name: 'file',
					header: {
						"token": "Bearer " + app.globalData.token,
						"Authorization": "Bearer " + app.globalData.token,
					},
					success: (uploadFileRes) => {
						var uploadFileData = JSON.parse(uploadFileRes.data);
						if (uploadFileData.code == 200) {
							_self.cover = uploadFileData.data
						} else {
							setTimeout(() => {
								uni.showToast({
									title: "上传失败" + uploadFileData.message,
									duration: 3000,
									icon: 'none'
								})
							}, 500);
							
			
						}
					},
					fail(e) {
						console.log("上传失败", e);
					}
				});
			
			},
			custom() {
				this.topic = ""
			},
			showMore() {
			
			},
			confirm(e) {
				var idx = e
				if (this.fileList.length == 20) {
					uni.showToast({
						title: '最多20张图',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				var index = this.fileList.length - 1;
				if(idx==2){
					idx = 3
				}
				console.log(idx)
				this.$refs['uploadView' + index][0].upload(idx)

			},
			commentTouched() {
				if(this.flag){
					return
				}
				if (this.content)
					var type = ''
				var path = ''
				// if (this.fileList.path.length != 0) {
				// 	type = this.fileList.type
				// 	path = this.fileList.path
				// }
				var that = this;
				// var uri = app.$config.interfaces.URLULR_COMMUNTITY_CREATE;
				var uri = app.globalData.config.BASE_URL + app.globalData.config.interfaces.URLULR_ARTICLE_CREATE;

				var topicList = []

				this.selectTopic.map(item => {
					var obj = {
						id: item.uuid,
						topicName: item.name
					}
					topicList.push(obj)
				})
				this.imgList = []
				if(this.cover == 'https://dnsverify.pfmoto.com/appstatic/community/article-cover.png'||this.cover ==''){
					uni.showToast({
						title: '请上传封面图',
						duration: 3000,
						icon: 'none'
					})
					return 
				}
				if(this.titleArticle ==''){
					uni.showToast({
						title: '请输入文章标题',
						duration: 3000,
						icon: 'none'
					})
					return 
				}
				for (let i in this.fileList) {
					if (this.fileList[i].url) {
						this.imgList.push(this.fileList[i].url)
					}
				}
			
				if(this.content.match(/<img/g)&&this.content.match(/<img/g).length>20){
					uni.showToast({
						title: '文章正文最多20张图片',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				console.log(this.content)
				var contentLen = this.content.replace(/<\/?.+?\/?>/g, '')
				
				if (contentLen.length <= 0 && this.urls.length <= 0) {
					uni.showToast({
						title: '请输入文章内容',
						duration: 3000,
						icon: 'none'
					})
					return
				}else if(contentLen.length>=10000){
					uni.showToast({
						title: '文章内容不能超过10000字符',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				
				
				this.urls.push(this.cover)
				var params = {
					authorId: app.getUserId(),
					titleArticle: this.titleArticle,
					webpublishCoverArticle: this.cover,
					type: 2,
					typeTrend:1,
					urls:this.urls,
					publisherFlag: 1,
					isPublish: 1,
					summaryArticle: '',
					topicList: topicList,
					subType: 2,
					webpublishFlagArticle: 0,
					content: this.content, //内容
					publisher:app.globalData.userInfo.userName
				}
				this.flag = true
				this.disabled = true
				network.post(uri, params, 'json').then(res => {

					
					if (res.code == 200) {
							that.clearData()
						uni.showToast({
							title: '发布成功',
							duration: 3000
						})
					
						app.globalData.workSwiper = 2
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/community/community'
							});
						}, 500);
					} else {
						setTimeout(() => {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}, 500);
						this.disabled = false
					}
					that.flag = false
				}).catch(res => {
					that.flag = false
					setTimeout(() => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
					}, 500);
					console.error(res);
					this.disabled = false
				});
			},
			toSelectTopic() {

				this.show = true


			},

			delImg(index) {
				console.log(index);
				this.fileList.splice(index, 1);
				console.log(this.fileList);
			},
			swichType(type) {

				if (type === 0) {
					this.showUpload = true;
				} else {
					this.showTopic = true;
				}
			},
			clearData() {
				this.fileList = [{
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				}]
				this.content = ''
				uni.setStorageSync('topicName', "")
				uni.setStorageSync('topicId', "")
				this.topicList = []
				
				this.titleArticle = ''
				this.cover = ''
				this.selectTopic = []
				this.clear()
			},


			deltopic(row) {

				// uni.removeStorageSync('topicName')
				// uni.removeStorageSync('topicId')
				this.selectTopic.map((item, index) => {
					if (item.uuid == row.uuid) {

						this.selectTopic.splice(index, 1)

					}
				})
				this.topicList.map((item, index) => {
					if (item.uuid == row.uuid) {
						this.topicList[index].select = false

					}
				})
			},
			play() {
				console.log(1111);
			},
			uploadPercent(item) {
				// console.log(12312312)
				// console.log(item, 'uploadPercent')
				// for (let i in this.fileList) {
				// 	if (this.fileList[i].uuid == item.uuid) {
				// 		this.fileList[i].percent = item.percent
				// 	}
				// }
			},
			uploading(item) {
				console.log(item)
				//to do 上传视频只能上传一个限制
				if (item.mediaType == 'video') {
					uni.showToast({
						title: "文章只能发图片",
						duration: 2000,
						icon: 'none'
					})
					return
				}
				console.log('巴拉巴拉')
				// this.fileList.push(item)
				this.fileList.push({
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				})
			},
			uploadSuccess(item) {
				console.log(item)
				uni.hideLoading()
				if(item.mediaType == 'image'){
					this.cover = item.url
				}
				
			
				// this.fileList.findIndex(x => x.uuid === item.uuid).url = item.url;
			},
			uploadError(item) {
				console.log(item);
				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
			},
			uploadDelete(item) {
				console.log(item);

				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
				if (item.mediaType == 'video') {
					this.fileList.push({
						type: 0,
						mediaType: 'add',
						url: '',
						path: '',
						uuid: util.createUidKey()
					})
				}
				console.log(this.fileList);
			},
			loadTopicList(isRefresh, name) {
				var uri = app.globalData.config.interfaces.URL_TOPIC_LIST;
				if (name) {
					var params = {
						"pageNum": this.topPagination.page,
						"pageSize": 10,
						"authorId": app.getUserId(),
						"name": name
					};
				} else {
					var params = {
						"pageNum": this.topPagination.page,
						"pageSize": 10,
						"authorId": app.getUserId()

					};
				}
				// var params = {
				// 	"pageNum": this.topPagination.page,
				// 	"pageSize": 3,
				// 	"authorId": app.getUserId()
				// };
				network.get(uri, params, 'form').then(res => {
					uni.stopPullDownRefresh();

					if (res.code == 200) {
						res.data.list.map(item => {
							item.select = false
						})
						var _list = res.data.list;
						var topPagination = this.topPagination;

						if (isRefresh) {
							topPagination.totalPage = res.data.totalPage;
							topPagination.length = res.data.total;
							this.topPagination = topPagination
							this.topicList = _list ? _list : []
						} else {
							if (_list && _list.length > 0) {
								this.topicList = [...this.topicList, ..._list]

							}
						}
						var loadMore = true;

						if (topPagination.page == topPagination.totalPage) {
							loadMore = false;
						} else {
							loadMore = true;
						}

						this.topPagination.loadMore = loadMore
					} else {
						setTimeout(() => {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}, 500);
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					
					setTimeout(() => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
					}, 500);
					console.error(res);
				});
			},

		},
	};
</script>

<style lang="scss">
	@import "./editor-icon.css";

	page {
		width: 100%;
		height: 100%;
		background: #f5f5f5;
	}

	.iconfont {
		display: inline-block;
		padding: 8px 8px;
		width: 24px;
		height: 24px;
		cursor: pointer;
		font-size: 20px;
	}

	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
		text-align: center;
	}

	.ql-container {
		box-sizing: border-box;
		padding: 24upx 20upx;
		width: 100%;
		min-height: 30vh;
		height: 100%;
		margin-top: 20px;
		font-size: 16px;
		line-height: 1.5;
	}

	.titleText {
		color: #3D3A3A;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 16px;
		align-items: center;
		display: flex;
		position: absolute;
		top: calc(50% - 10px);
		left: calc((100% - 40px)/2);
	}

	.titleCommentTouched {
		width: 60px;
		height: 30px;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 30px;
		align-items: center;
		font-size: 14px;
		color: #FFFFFF;
		border: 1px solid #EA5404;
		background-color: #EA5404;
		position: absolute;
		left: calc(100% - 84px - 16px);
		top: calc(50% - 16px);
	}

	.titleCommentTouched_ {
		width: 60px;
		height: 30px;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 30px;
		align-items: center;
		font-size: 14px;
		color: #ADB0AE;
		border: 1px solid #EDEDED;
		background-color: #EDEDED;
		position: absolute;
		left: calc(100% - 84px - 16px);
		top: calc(50% - 16px);
	}

	.showMore {
		width: 60px;
		height: 30px;
		position: absolute;
		top: calc(50% - 15px);
		left: calc(100% - 70px);
	}
	.content-pd{
		padding-bottom: 120upx;
	}
	.releaseState {
		width: calc(100vw - 60rpx);
		height: 100%;
		background: url("https://dnsverify.pfmoto.com/appstatic/my/my_icon_list_background.jpg") no-repeat;
		background-size: 100%, 100vh;
		position: absolute;
		/*#ifdef MP-WEIXIN*/
		top: 88px;
		/*#endif*/
		/*#ifdef APP-PLUS||H5*/
		top: 44px;
		/*#endif*/
	}

	.popup {
		padding: 30rpx;
	}

	/deep/.ql-blank:before {
		font-style: normal !important;
		font-size: 28rpx;
		color: #ADB0AE;
		font-weight: 400;
	}

	.action-wraper {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
	}

	#editor {
		width: 100%;
		    font-family: 'PingFang SC';
		    font-style: normal;
		    font-weight: 400;
		    font-size: 14px;
		    line-height: 20px;
		    text-transform: uppercase;
		    color: #333333;
		    margin-top: 15px;
		  
	}

	.action-wraper text {
		font-size: 32rpx;
		font-weight: 600;
		color: #3d3a3a;
	}

	/deep/ .u-textarea__count {
		position: relative;
		top: 0;
	}

	/deep/ .u-textarea,
	/deep/ .u-textarea__count {
		background-color: transparent !important;
	}

	.action-wraper image {
		width: 48rpx;
		height: 48rpx;
	}

	/deep/ u-search {
		margin-bottom: 30rpx;
	}
	.noData {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.noData text {
		font-size: 28rpx;
	}
	
	.noData text:first-child {
		color: #ADB0AE;
	}
	
	.noData text:last-child {
		color: #ea5454;
	}
	.hot-topic {
		display: flex;
		flex-wrap: wrap;
	}

	.s-topoc-item .topic {
		display: block;
	}

	.hot-topic-title {
		margin-top: 30rpx;
	}

	.hot-topic-item {
		width: 50%;
		margin-top: 40rpx;

	}

	.hot-topic .select .text {
		color: #ADB0AE;

	}

	.hot-topic .select image {
		opacity: 0.3;
	}

	.hot-topic-item .text {
		display: inline-block;
		width: auto;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 28rpx;
		color: #3d3a3a;
		left: 0px;
		top: 0px;
		padding: 4rpx 20rpx;
		text-align: center;
		background: rgba(61, 58, 58, 0.1);
		border-radius: 4rpx;

	}

	.hot-topic-item image {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		margin-right: 10rpx;
		top: 4rpx;
	}

	/deep/.u-popup .u-popup__content {
		height: 80vh;
		flex: 1 1 1 !important;
	}
	/deep/ .u-transition {
		height: 80vh;
	}
	/deep/ .u-search__content__icon {
		background-image: url('https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png');
		background-size: 28rpx 28rpx;
		background-repeat: no-repeat;
		background-position: 0 50%;
	}

	.topic {
		display: flex;
		    margin-top: 20px;
		    flex-wrap: wrap;
			padding: 20upx;
	}

	.topic-item {

		background: rgba(234, 84, 4, 0.1);
		    border-radius: 4rpx;
		    display: inline;
		    padding: 4px 20rpx;
		    margin-right: 30rpx;
		    font-size: 24rpx;
		    display: flex;
		    align-items: center;
		    margin-bottom: 20rpx;

	}

	.upload-img image {
		width: 40rpx;
		height: 36rpx;
		margin-left: 20rpx;
		margin-top: 8rpx;
	}

	.topic .close-topic {
		width: 32rpx;
		height: 32rpx;
		position: relative;
		top: 0;
		right: -14rpx;
	}

	.topic image {
		width: 24rpx;
		height: 24rpx;
	}

	.topic-item text {
		color: #EA5404;
		padding-left: 20rpx;
	}

	.topic image {
		width: 24rpx;
		height: 24rpx;
	}

	.inputGreybg,
	.inputGreybg .uploadImg {
		width: 100%;
		height: 396rpx;
		display: inline-block;
	}

	.topicWraper {
		font-size: 28rpx;
		color: #828282;
		display: flex;

		padding: 40rpx 0;
		margin-top: 20rpx;
	}

	.releaseState {
		padding: 0 30rpx;

		.textarea {
			font-size: 28rpx;
			line-height: 160%;
			color: #bdbdbd;
			width: 100%;
			padding-top: 30rpx;
		}

		.uploadImg {
			margin-top: 20rpx;

			.videoClass {
				width: 100%;

				#myVideo {
					width: 100%;
				}
			}

			.imageList {
				margin: 6rpx 6rpx 0 0;
				display: inline-block;
				position: relative;

				.image {
					width: 216rpx;
					height: 216rpx;
					display: inline-block;
					border-radius: 20rpx;
				}

				.delImg {
					position: absolute;
					right: 8rpx;
					top: 8rpx;
					width: 40rpx;
					height: 40rpx;
					z-index: 2;
				}
			}

			.onlyImageList {
				.onlyImage {
					width: 100%;
					display: inline-block;
				}
			}
		}

		.uploadBtn {
			width: 216rpx;
			height: 216rpx;
			border-radius: 20rpx;
			display: inline-block;
		}

		.videoView {
			width: 672rpx;
			height: 522rpx;
			border-radius: 20rpx;
			display: inline-block;
			margin-bottom: 100rpx;
		}

		.uploadTopic {

			font-weight: bold;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #bdbdbd;
			display: flex;
			align-items: center;

			.topicName {

				display: inline-block;

				width: 164rpx;
				height: 48rpx;
				line-height: 48rpx;
				font-size: 28rpx;
				color: #3d3a3a;
				left: 0px;
				top: 0px;
				text-align: center;
				background: rgba(61, 58, 58, 0.1);
				border-radius: 4rpx;

				.s-topic {
					width: 30rpx;
					height: 30rpx;
					position: relative;
					left: -10rpx;
					top: 4rpx;
				}
			}

			.deltopic {
				width: 40rpx;
				height: 40rpx;
				margin-left: 6rpx;
				position: relative;
				top: 10rpx;
			}
		}

		.footer {
			position: fixed;
			bottom: 0rpx;
			left: 0;
			right: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #f5f5f5;
			padding: 30rpx 46rpx;
		}

		.commentTouched {
			width: 84px;
			height: 32px;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 32px;
			align-items: center;
			font-size: 14px;
			color: #FFFFFF;
			border: 1px solid #EA5404;
			background-color: #EA5404;
			position: absolute;
			left: calc(100% - 84px - 16px);
			top: calc(50% - 16px);
		}

		.commentTouched_ {
			width: 84px;
			height: 32px;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 32px;
			align-items: center;
			font-size: 14px;
			color: #ADB0AE;
			border: 1px solid #EDEDED;
			background-color: #EDEDED;
			position: absolute;
			left: calc(100% - 84px - 16px);
			top: calc(50% - 16px);
		}
	}
</style>
